<template>
  <div>
    <SearchConfig
      ref="SearchConfig"
      :fieldOptions="stepData.fieldOptions"
      :selectedList="stepData.step5"
    ></SearchConfig>

    <span class="footer">
      <el-button size="mini" type="primary" @click="prev()">{{$t('workFlow.Step1.stepBackBtn')}}</el-button>
      <el-button size="mini" type="primary" @click="next()">{{$t('workFlow.Step1.nextStepBtn')}}</el-button>
    </span>
  </div>
</template>

<script>
import SearchConfig from "./SearchConfig.vue";
export default {
  components: {
    SearchConfig
  },
  props: {
    stepData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    prev() {
      this.stepData.activeStep--;
    },
    next() {
      let querySelection = this.$refs.SearchConfig.querySelection;
      let bindTableFiled = this.stepData.bindTableFiled;
      let data = [];
      if (querySelection?.length > 0) {
        querySelection.forEach(element => {
          if(element.name){
            let { fieldName, bindTable, fieldsId,resourceId } = bindTableFiled.get(
            element.name
          );
          if (element.isChecked) {
            let temp = {
              isChecked: element.isChecked,
              name: element.name,
              fieldName,
              searchtype: element.searchtype,
              width: element.width,
              height: element.height,
              field: fieldsId,
              bindTable,
              resourceId
            };
            data.push(temp);
          }
          }
          
        });
      }

      if (data.length > 0) {
        this.stepData.step5 = data;
        this.stepData.activeStep++;
      } else {
        this.$message(this.$t('workFlow.Step4.hintMustSelect'));
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main-container {
  margin-bottom: 60px;
}
.footer {
  padding: 10px 30px 20px;
  text-align: right;
  display: block;
  position: absolute;
  right: 10px;
  bottom: 0;
}
</style>
